import React, { useEffect, useState } from 'react';
import {
  Tabs,
  Input,
  Form,
  DatePicker,
  ConfigProvider,
  Select,
  Button,
  Divider,
  Pagination,
  Checkbox,
  PaginationProps,
  Card,
  Table,
  message,
} from 'antd';
import styles from './index.less';
import dayjs from 'dayjs';
import { history, KeepAlive } from 'umi';
import { DeleteOutlined } from '@ant-design/icons';
import { saveReport, getReport } from '@/api/game_report_controller';

const { Option } = Select;
const { Search } = Input;
const { TextArea } = Input;

const CompareReportManager = (props) => {
  // 基线卡片列表
  const [baselineCardList, setBaselineCardList] = useState([]);
  const [testTeams, setTestTeams] = useState([]);
  const [testObjective, setTestObjective] = useState([]);
  const [testName, setTestName] = useState('');
  const [testObjectiveInput, setTestObjectiveInput] = useState('');
  const [softwareVersion, setSoftwareVersion] = useState('');
  const [hardwareVersion, setHardwareVersion] = useState('');
  // 测试团队选中值
  const [testTeamValue, setTestTeam] = useState('');
  // 测试方法选中值
  const [testMethodValue, setTestMethod] = useState('');
  // 报告名称value
  const [reportNameValue, setReportName] = useState('');
  // 测试目的value
  // 软件版本value
  const [softVersionValue, setSoftVersion] = useState('');
  // 硬件版本value
  const [hardWareVersionValue, setHardWareVersion] = useState('');
  const addProblem = (e) => {
    tableData.push({ key: tableData.length + 1 });
    console.log(tableData);
    settableData([...tableData]);
  };

  const deleteProblem = (record, index) => {
    console.log('record', record);
    // settableData(tableData.filter(a => a.key !== record.key));
    const newData = tableData.filter((item) => item.key !== record.key);
    settableData(newData);
  };

  const handleTextChangeProblem = (e, record) => {
    //tableData[index].problem=event.target.value;
    const { value } = e.target;
    const newData = [...tableData];
    const index = newData.findIndex((item) => record.key === item.key);
    if (index > -1) {
      newData[index].description = value;
      settableData(newData);
    }
  };
  const handleTextChangeLog = (e, record) => {
    //tableData[index].problem=event.target.value;
    const { value } = e.target;
    const newData = [...tableData];
    const index = newData.findIndex((item) => record.key === item.key);
    if (index > -1) {
      newData[index].archivePath = value;
      settableData(newData);
    }
  };

  const [tableData, settableData] = useState([]);

  const [detailData, setDetailData] = useState([
    {
      key: 1,
      phone: 'info1',
      testVersion: '1',
    },
    {
      key: 2,
      phone: 'info2',
      testVersion: '2',
    },
  ]);
  const columns = [
    {
      title: '问题描述',
      dataIndex: 'description',
      key: 'description',
      render: (_, record, index) => (
        <TextArea
          style={{ width: '100%' }}
          // value={tableData[index].description}
          onChange={(e) => {
            handleTextChangeProblem(e, record);
          }}
        ></TextArea>
      ),
    },
    {
      title: 'log与systrace归档路径',
      dataIndex: 'archivePath',
      key: 'archivePath',
      render: (_, record, index) => (
        <TextArea
          style={{ width: '100%' }}
          // value={tableData[index].archivePath}
          onChange={(e) => {
            handleTextChangeLog(e, record);
          }}
        ></TextArea>
      ),
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_, record, index) => (
        <a
          onClick={() => {
            deleteProblem(record, index);
          }}
        >
          Delete
        </a>
      ),
    },
  ];
  const columnsDetail = [
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: () => <a>Delete</a>,
      width: 100,
    },
    {
      title: '基础信息',
      dataIndex: 'baseInfo',
      key: 'baseInfo',
      children: [
        {
          title: '测试手机',
          dataIndex: 'phone',
          key: 'phone',
          width: 100,
        },
        {
          title: '测试版本',
          dataIndex: 'testVersion',
          key: 'testVersion',
          width: 100,
        },
        {
          title: '测试游戏',
          dataIndex: 'testGame',
          key: 'testGame',
          width: 100,
        },
        {
          title: '游戏版本',
          dataIndex: 'gameVersion',
          key: 'gameVersion',
          width: 100,
        },
        {
          title: '满帧',
          dataIndex: 'fullFrame',
          key: 'fullFrame',
          width: 100,
        },
      ],
    },
    {
      title: '关键数据',
      dataIndex: 'keyData',
      key: 'keyData',
      children: [
        {
          title: '平均帧率',
          dataIndex: 'averageFrame',
          key: 'averageFrame',
          width: 100,
        },
        {
          title: '低帧率',
          dataIndex: 'lowFrame',
          key: 'lowFrame',
          width: 100,
        },
        {
          title: '抖动率',
          dataIndex: 'jitterRate',
          key: 'jitterRate',
          width: 100,
        },
        {
          title: '每小时卡顿次数',
          dataIndex: 'numberHour',
          key: 'numberHour',
          width: 100,
        },
        {
          title: '最差丢帧',
          dataIndex: 'lostFrame',
          key: 'lostFrame',
          width: 100,
        },
        {
          title: '归一化电流',
          dataIndex: 'normalizedCurrent',
          key: 'normalizedCurrent',
          width: 100,
        },
        {
          title: '分辨率',
          dataIndex: 'resolutionRatio',
          key: 'resolutionRatio',
          width: 100,
        },
        {
          title: '游戏版本',
          dataIndex: 'gameVersion',
          key: 'gameVersion',
          width: 100,
        },
      ],
    },
    {
      title: '辅助数据',
      dataIndex: 'auxiliaryata',
      key: 'auxiliaryata',
      children: [
        {
          title: '链接',
          dataIndex: 'link',
          key: 'link',
          render: () => <a>报告详情</a>,
          width: 100,
        },
        {
          title: '环境温度',
          dataIndex: 'ambientTemperature',
          key: 'ambientTemperature',
          width: 100,
        },
        {
          title: 'shell最低温度',
          dataIndex: 'shellLow',
          key: 'shellLow',
          width: 100,
        },
        {
          title: 'shell最高温度',
          dataIndex: 'shellHigh',
          key: 'shellHigh',
          width: 100,
        },
        {
          title: 'system_h最低温度',
          dataIndex: 'systemLow',
          key: 'systemLow',
          width: 100,
        },
        {
          title: 'system_h最高温度',
          dataIndex: 'systemHigh',
          key: 'systemHigh',
          width: 100,
        },
        {
          title: '壳温升温',
          dataIndex: 'shellRise',
          key: 'shellRise',
          width: 100,
        },
        {
          title: '前10分钟温长',
          dataIndex: 'durationTen',
          key: 'durationTen',
          width: 100,
        },
        {
          title: '低温时长占比',
          dataIndex: 'durationLow',
          key: 'durationLow',
          width: 100,
        },
        {
          title: '最小帧',
          dataIndex: 'minFrame',
          key: 'minFrame',
          width: 100,
        },
        {
          title: '测试方式',
          dataIndex: 'testType',
          key: 'testType',
          width: 100,
        },
        {
          title: '测试人员',
          dataIndex: 'testers',
          key: 'testers',
          width: 100,
        },
        {
          title: '测试时间',
          dataIndex: 'testTime',
          key: 'testTime',
          width: 100,
        },
        {
          title: '游戏时长(分钟)',
          dataIndex: 'gameTime',
          key: 'gameTime',
          width: 100,
        },
        {
          title: 'CPU-C1(频率)',
          dataIndex: 'CPU-C1',
          key: 'CPU-C1',
          width: 100,
        },
        {
          title: 'CPU-C2(频率)',
          dataIndex: 'CPU-C2',
          key: 'CPU-C2',
          width: 100,
        },
        {
          title: 'CPU-C3(频率)',
          dataIndex: 'CPU-C3',
          key: 'CPU-C3',
          width: 100,
        },
        {
          title: 'GPU(频率)',
          dataIndex: 'GPU',
          key: 'GPU',
          width: 100,
        },
        {
          title: 'DDR(频率)',
          dataIndex: 'DDR',
          key: 'DDR',
          width: 100,
        },
        {
          title: '备注',
          dataIndex: 'note',
          key: 'note',
          width: 100,
        },
      ],
    },
  ];
  const testTeamsListGet = () => {
    let testTeam = [
      {
        value: '软工性能组',
        label: '软工性能组',
      },
      {
        value: 'PDU一部',
        label: 'PDU一部',
      },
      {
        value: 'PDU二部',
        label: 'PDU二部',
      },
    ];
    setTestTeams([...testTeam]);
  };
  const testObjectiveListGet = () => {
    let testObjective = [
      {
        value: '230523小米竞品数据刷新',
        label: '230523小米竞品数据刷新',
      },
      {
        value: 'ALT-A竞品数据',
        label: 'ALT-A竞品数据',
      },
      {
        value: '展开英雄联盟',
        label: '展开英雄联盟',
      },
    ];
    setTestObjective([...testObjective]);
  };

  useEffect(() => {
    let arr = [];
    for (let i = 0; i < 8; i++) {
      const serialNo = i.toString();
      arr.push({
        id: serialNo,
        name: `${serialNo}音视频测试-视频流畅性测试`,
        date: `2023-05-31 16:00:00`,
        personnelNo: `${serialNo}${serialNo}${serialNo}${serialNo}`,
      });
    }
    testTeamsListGet();
    setBaselineCardList(arr);
  }, []);
  const onDelete = () => {
    // 处理删除操作
  };
  const testTeamChange = (value) => {
    setTestTeam(value);
    console.log(`selected ${value}`);
    testObjectiveListGet();
  };
  const testMethodChange = (value) => {
    setTestMethod(value);
  };
  const queryReportBtn = async (value) => {
    const par = {
      baseline: '',
      projectId: '614',
      compareUpVersion: '',
      testTeam: testTeamValue,
      testMethod: testMethodValue,
      versions: '',
      gameName: '',
    };
    const { data } = testTeamValue
      ? await getReport(par)
      : message.warning('请选择测试团队');
    // 表单回显
    if (data) {
      setReportName(data.data.reportName);
      setSoftVersion(data.data.softVersion);
      setHardWareVersion(data.data.hardwareVersion);
    }
    console.log('-----------(查询报告)', data);
  };
  const saveReportBtn = async () => {
    // 保存报告
    const par = {
      projectId: '614',
      reportName: reportNameValue,
      softVersion: softVersionValue,
      hardwareVersion: hardWareVersionValue,
      newQuestions: tableData,
      reportCondition: {
        baseline: '',
        compareUpVersion: '',
        testTeam: testTeamValue,
        testMethod: testMethodValue,
        versions: '',
        gameName: '',
      },
      versionQualityReq: '',
      actualVersionQuality: '',
    };
    console.log('-----------(保存报告传参)', par);
    const resp = await saveReport(par);
    console.log('-----------(保存报告返回值)', resp);
  };
  const cardExtra = (
    <Button type="text" onClick={onDelete}>
      <DeleteOutlined />
    </Button>
  );

  return (
    <div className={styles.reportContainer}>
      <div className={styles.messageCard}>
        <div className={styles.title}>
          <div className={styles.title_black}></div>
          条件筛选
        </div>
        <div className={styles.smallTable}>
          <div className={styles.tableColumn}>
            <div className={styles.column_label}>
              <label className={styles.column_title}>测试团队</label>
              <Select
                allowClear
                className={styles.select_type}
                options={testTeams}
                onChange={testTeamChange}
              />
            </div>
            <div className={styles.column_label}>
              <label className={styles.column_title}>测试方法</label>
              <Select
                allowClear
                className={styles.select_type}
                options={testObjective}
                onChange={testMethodChange}
              />
            </div>
          </div>
        </div>

        <div className={styles.query_div}>
          <Button
            className={styles.query_bt}
            type="primary"
            onClick={queryReportBtn}
          >
            查询
          </Button>
        </div>

        <div className={styles.title}>
          <div className={styles.title_black}></div>
          基本信息
        </div>

        <div className={styles.baseTable}>
          <div className={styles.tableColumn}>
            <div className={styles.column_label}>
              <label className={styles.column_title}>报告名称</label>
              <Input
                allowClear
                placeholder="请输入报告名称"
                className={styles.input_info}
                value={reportNameValue}
                onChange={(val) => {
                  setReportName(val.nativeEvent.target.value);
                }}
              />
            </div>
          </div>
          <div className={styles.tableColumnNext}>
            <div className={styles.column_label}>
              <label className={styles.column_title}>测试目的</label>
              <Input
                allowClear
                placeholder="请输入测试目的"
                className={styles.input_info}
                // value={testObjectiveInput}
              />
            </div>
            <div className={styles.column_label}>
              <label className={styles.column_title}>软件版本</label>
              <Input
                allowClear
                placeholder="请输入软件版本"
                className={styles.input_info}
                value={softVersionValue}
                onChange={(val) => {
                  setSoftVersion(val.nativeEvent.target.value);
                }}
              />
            </div>
            <div className={styles.column_label}>
              <label className={styles.column_title}>硬件版本</label>
              <Input
                allowClear
                placeholder="请输入硬件版本"
                className={styles.input_info}
                value={hardWareVersionValue}
                onChange={(val) => {
                  setHardWareVersion(val.nativeEvent.target.value);
                }}
              />
            </div>
          </div>
        </div>

        <div className={styles.title}>
          <div className={styles.title_black}></div>
          测试结论
        </div>

        <div className={styles.resultTable}>
          <div className={styles.newly}>
            <Button className={styles.btn_add} onClick={addProblem}>
              新增问题
            </Button>
          </div>
          <Table
            columns={columns}
            dataSource={tableData}
            className={styles.table_style}
            pagination={false}
          ></Table>
        </div>

        <div className={styles.title}>
          <div className={styles.title_black}></div>
          详细数据
        </div>

        <div className={styles.detailTable}>
          <Table
            className={styles.table_top}
            pagination={false}
            columns={columnsDetail}
            dataSource={detailData}
            scroll={{
              x: 'calc(700px + 50%)',
              y: 240,
            }}
          ></Table>
        </div>
        <div className={styles.footer}>
          <Button
            type="primary"
            className={styles.bt_style}
            onClick={saveReportBtn}
          >
            保存报告
          </Button>
          <Button className={styles.exportBtn} type="primary">
            导出报告
          </Button>
        </div>
      </div>
    </div>
  );
};

export default CompareReportManager;
